<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>微信登录绑定手机号</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width,viewport-fit=cover">
    <link th:href="@{/shoppingApi/css/public.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/publicOfuser.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/combtn.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/accsetting.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/weui.min.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/jquery-weui.min.css}" rel="stylesheet">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header"  th:content="${_csrf.headerName}"/>
</head>
<body>
<div class="main wx">

    <div class="main_con">
        <div class="logo">
            <img class="logo-text" src="/shoppingApi/images/logo-text.png" alt="">
            <a th:href="@{/wap/skip}">跳过</a>
        </div>
        <img class="tips-img" src="/shoppingApi/images/tips-img.png" alt="">
        <div class="inp-label">
            <div class="inp-area"><input id="phone" type="number" placeholder="请输入手机号"></div>
        </div>
        <div class="inp-label inp-label-code">
            <div class="inp-area"><input id="code" type="number" placeholder="请输入验证码"></div>
            <span class="send-btn" id="sendBtn" onclick="sendCode(this)">获取手机验证码</span>
            <span class="send-btn" id="sendAgain" onclick="sendCode(this)" style="display: none;">重新获取验证码</span>
            <span class="timer-text" id="timer" style="display: none;">60秒后重新获取</span>
        </div>
        <button class="submit-btn" onclick="submitForm()">确定注册</button>
        <img class="product-img" src="/shoppingApi/images/product-img.jpg" alt="">
    </div>

</div>
</body>
<script th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/shoppingApi/js/jquery-weui.min.js}"></script>
<script>

    var bl =true;

    // 绑定注册
    function submitForm() {
        if (!isPhone()) {
            $.toast("请输入手机号码", 'text');
            return;
        }
        if (!isCode()) {
            $.toast("请输正确验证码", 'text');
            return;
        }
        // 此处写业务代码
        if(bl) {
            bl = false;
            userBinding();
        }
        else
        {$.toast("请稍等，正在绑定...", 'text');}
    }
    // 发送验证码
    function sendCode(obj) {
        if (isPhone()) {
            $(obj).hide();
            countdown();
            // 此处写业务代码
            senCode();
        } else {
            $.toast("手机号错误", 'text');
        }
    }
    // 验证码60s重发倒计时
    function countdown() {
        var timerEl = $('#timer'), sendAgainBtn = $('#sendAgain');
        timerEl.text('60秒后重新获取').show();
        var time = 60;
        var timer = setInterval(function () {
            if (time > 1) {
                time--;
                timerEl.text(time + '秒后重新获取');
            } else {
                clearInterval(timer);
                timerEl.hide();
                sendAgainBtn.show();
            }
        }, 1000);
    }
    // 验证手机号码
    function isPhone() {
        var phone = $('#phone').val();
        return /^1[3456789]\d{9}$/.test(phone);
    }
    // 验证码检验
    function isCode() {
        var code = $('#code').val();
        if (!code || code.length != 4) {
            return false;
        } else {
            return true;
        }
    }

    //发生验证码
    function senCode() {
        var phone = $("#phone").val();
        if(isPhone())
        {
            $.ajax({
                async:false,
                dataType: 'json',
                contentType: 'application/json',
                url:'/wap/sendCodeByPhone?phone='+phone+"&type=20",
                success:function (result) {
                    var  data=$.parseJSON(result.json);
                    if(data.stat==100){
                        getCodeTimer();
                    }else {
                        $('.code-msg').html("发送错误!");
                    }
                }
            });
        }
    }

    function userBinding() {
        var phone = $("#phone").val();
        var phoneCode = $("#code").val();
        if(isPhone ())
        {
            var url='/wap/userBinding?phone='+phone+"&phoneCode="+phoneCode;
            //alert(url);
            $.ajax({
                async:false,
                dataType: 'json',
                contentType: 'application/json',
                url:url,
                success:function (result) {
                    if(result.msgCode=="000000"){
                        //alert("绑定成功");
                        window.location = result.data;
                    }else {
                        bl=true;
                        alert("绑定失败"+result.errorDetail);
                    }
                }
            });
        }
    }

</script>
</html>